// 导入Vue库
import Vue from "vue";
// 导入根组件
import App from "./App.vue";
// 导入Vue路由器，用于页面路由
import VueRouter from "vue-router";
// 导入Element UI库，一个基于Vue 2的桌面端组件库
import ElementUI from "element-ui";
// 导入Element UI的默认主题样式
import "element-ui/lib/theme-chalk/index.css";
// 导入登录页面组件
import Login from "./user/login.vue";
// 导入axios库，用于HTTP请求
import axios from "axios";
// 导入用户页面组件
import User from "./user/index.vue";
// 导入布局组件
import Layout from "./layout/index.vue";
// 导入轮播图页面组件
import Swiper from "./swiper/index.vue";

// 使用axios创建一个HTTP请求的实例，并配置默认值
const instance = axios.create({
	baseURL: "http://localhost:9000", // 设置请求的基础URL
});

// 设置axios实例的请求头，指定POST请求的内容类型为JSON
instance.defaults.headers.post["Content-Type"] = "application/json";
// 设置axios实例的通用请求头，从localStorage获取token并设置到请求头的authorization字段
instance.defaults.headers.common["authorization"] =
  `${window.localStorage.getItem("token")}`;

// 将axios实例挂载到Vue的原型上，使其在组件中可以通过this.$http访问
Vue.prototype.$http = instance;

// 使用Vue路由器
Vue.use(VueRouter);
// 使用Element UI库
Vue.use(ElementUI);

// 创建Vue路由器实例，并配置路由规则
const router = new VueRouter({
	routes: [
		{
			path: "/", // 根路由，重定向到Layout组件
			component: Layout,
			children: [ // Layout组件的子路由
				{ path: "/user", name: "user", component: User }, // 用户页面路由
				{ path: "/swiper", name: "swiper", component: Swiper }, // 轮播图页面路由
			],
		},
		{ path: "/login", name: "login", component: Login }, // 登录页面路由
	],
});

// 定义路由守卫，用于全局前置导航守卫
router.beforeEach((to, from, next) => {
	const token = localStorage.getItem("token"); // 从localStorage获取token
  // 如果当前路由不是登录页且没有token，则重定向到登录页
  if (to.name !== 'login' && !token) next({ name: 'login' });
  // 否则继续原来的导航
  else next()
})

// 创建Vue实例，使用router实例，并渲染App组件挂载到id为app的元素上
new Vue({
	router,
	render: h => h(App),
}).$mount("#app");